@charset "utf-8";
//像素比除以2
@function p($px) {
    @return $px/2+px;
}
html,body{
    width: 100%;
    height: 100%;
}
//头部
.tb{
    display: flex;
    //菜单
    .cdan{
        display: flex;
        flex-grow: 0;
        justify-content: center;
        align-items: center;
        margin-left: p(43);
        margin-top: p(23);
        margin-bottom: p(25);
        .icon-cd{
            font-size: p(40);
            color: #241f47;
        }
    }
    //搜索框
    .ssk{
       
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        margin-top: p(22);
        position: relative;
        width: 100%;
        height: p(39);
        input{
            padding-left: p(10);
            width:65.6%;
            
            border-radius:p(14);
            border: p(1) solid #241f47;
            
        }
        input:focus ~ i{
            display: none;
        }
        .icon-ssk{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
}
//轮播图
.lbt {
    .swiper-container {
        .swiper-wrapper {
            .swiper-slide {
                width: 100%;
                height: p(313);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
        }
    }
}

//内容
.nr {
    background: url(../img/beijing.png);
    height: 100%;
    width: 100%;
    padding-top: p(16);
    padding-right: p(15);
    //吊坠系列
    .dzxl {
        
        margin-left: p(15);
        background: #fff;
        
        justify-content: space-between;
        display: flex;
        .dzxl_1 {
            width: p(351);
            height: p(178);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        //吊坠系列文字
        .dzxl_2 {
            
            display: flex;
            align-items: center;
            margin-right: p(35);
            position: relative;
            .dzxl_2_1 {
                width: p(186);
                height: p(60);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .dzxl_2_2 {
                position: absolute;
                top: p(71);
                left: p(57);
                p {
                    font-size: p(26);
                    color: #fff;
                }
            }
        }
    }
    //戒指系列
    .jzxl {
        margin-top: p(15);
        margin-left: p(15);
        background: #fff;
        
        justify-content: space-between;
        display: flex;
        .jzxl_1 {
            width: p(351);
            height: p(178);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        //戒指系列文字
        .jzxl_2 {
            display: flex;
            align-items: center;
            margin-right: p(35);
            position: relative;
            .jzxl_2_1 {
                width: p(186);
                height: p(60);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .jzxl_2_2 {
                position: absolute;
                top: p(71);
                left: p(57);
                p {
                    font-size: p(26);
                    color: #fff;
                }
            }
        }
        
}
//耳环系列
    .ehxl {
        margin-top: p(15);
        margin-left: p(15);
        background: #fff;
        
        justify-content: space-between;
        display: flex;
        .ehxl_1 {
            width: p(351);
            height: p(178);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        //耳环系列文字
        .ehxl_2 {
            display: flex;
            align-items: center;
            margin-right: p(35);
            position: relative;
            .ehxl_2_1 {
                width: p(186);
                height: p(60);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .ehxl_2_2 {
                position: absolute;
                top: p(71);
                left: p(57);
                p {
                    font-size: p(26);
                    color: #fff;
                }
            }
        }
    }


}
//尾部导航
.wbdh {
    padding-top: p(15);
    padding-bottom: p(12);
    position: fixed;
    bottom: 0;
    width: 100%;
    
    border-top: p(2) solid #231e45;
    background: #fff;
    display: flex;
    justify-content: space-around;
    //首页
    .sy {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: p(15);
        .sy_1 {
            width: p(46);
            height: p(40);
            overflow: hidden;
            display: flex;
            justify-content: center;
            img {
                width: 100%;
            }
        }
        .sy_2 {
            display: flex;
            justify-content: center;
            p {
                font-size: p(29);
                color: #fade5d;
            }
        }
    }
    //帮购
    .bg {
        padding-left: p(46);
        display: flex;
        flex-direction: column;
        align-items: center;
        .bg_1 {
            width: p(38);
            height: p(38);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .bg_2 {
            font-size: p(29);
            color: #241f47;
        }
    }
    //购物车  
    .gwc {
        padding-left: p(37);
        display: flex;
        flex-direction: column;
        align-items: center;
        .gwc_1 {
            width: p(42);
            height: p(39);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .gwc_2 {
            font-size: p(29);
            color: #241f47;
        }
    }
    //个人中心
    .grzx {
        padding-left: p(17);
        display: flex;
        flex-direction: column;
        align-items: center;
        .grzx_1 {
            width: p(40);
            height: p(39);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .grzx_2 {
            font-size: p(29);
            color: #241f47;
        }
    }
}